import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import { NotificationOutlined } from "@ant-design/icons";
import { personalApi } from "@/services/basic";
import "./style.css";
let timer = null;
class HomePage extends Component {
	state = {
		title: "",
		content: "",
		OptionRight: [],
		OptionLeft: [],
		OptionGG: [],
		OptionSale:[],
		freeze: false,
	};

	// getOptionBottom = () => {
	//     return {
	//         title: {
	//         },
	//         tooltip: {
	//             trigger: 'axis'
	//         },
	//         legend: {
	//             data: ['蒸发量', '降水量']
	//         },
	//         grid: {
	//             y2: 40,
	//             borderWidth: 1
	//         },
	//         calculable: true,
	//         xAxis: [
	//             {
	//                 type: 'category',
	//                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	//             }
	//         ],
	//         yAxis: [
	//             {
	//                 type: 'value'
	//             }
	//         ],
	//         series: [
	//             {
	//                 name: '蒸发量',
	//                 type: 'bar',
	//                 data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
	//                 markPoint: {
	//                     data: [
	//                         { type: 'max', name: '最大值' },
	//                         { type: 'min', name: '最小值' }
	//                     ]
	//                 },
	//                 markLine: {
	//                     data: [
	//                         { type: 'average', name: '平均值' }
	//                     ]
	//                 }
	//             },
	//             {
	//                 name: '降水量',
	//                 type: 'bar',
	//                 data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
	//                 markPoint: {
	//                     data: [
	//                         { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
	//                         { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
	//                     ]
	//                 },
	//                 markLine: {
	//                     data: [
	//                         { type: 'average', name: '平均值' }
	//                     ]
	//                 }
	//             }
	//         ]
	//     };
	// }

	//组件挂载后为列表请求数据
	componentDidMount = () => {
		personalApi.getJD().then((res) => {
			this.setState({
				OptionRight: res.data,
			});
		});
		personalApi.getZH().then((res) => {
			this.setState({
				OptionLeft: res.data,
			});
		});
		personalApi.getSale().then((res) => {
			this.setState({
				OptionSale: res.data,
			});
		});
		personalApi.getGG().then((res) => {
			this.setState({
				OptionGG: res,
				title: res.records[0].ggbt,
				content: res.records[0].ggnr,
			});
		});
	};

/*	getOptionLeft = () => {
		let sj = this.state.OptionLeft.names;
		let value = this.state.OptionLeft.value1;
		let data = [];
		if (this.state.OptionLeft.names && this.state.OptionLeft.value1) {
			for (let i = 0; i < value.length; i++) {
				data.push({ value: value[i], name: sj[i] });
			}
		}
		return {
			title: {
				x: "center",
			},
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b} : {c} ({d}%)",
			},
			legend: {
				orient: "vertical",
				left: "left",
				data: sj,
			},
			series: [
				{
					name: "访问来源",
					type: "pie",
					radius: "65%",
					center: ["50%", "50%"],
					data: data,
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)",
						},
					},
				},
			],
		};
	};*/

	getOptionRight = () => {
		let sj = this.state.OptionRight.names;
		let value = this.state.OptionRight.value1;
		return {
			tooltip: {
				trigger: 'axis', // 触发类型，'axis' 表示按坐标轴触发
				axisPointer: {
					type: 'line', // 默认为直线，可选为：'line' | 'shadow'
					lineStyle: {
						color: '#333', // 指示线的颜色
						width: 1,      // 指示线的宽度
					},
				},
			},
			xAxis: {
				type: "category",
				boundaryGap: false,
				data: sj,
				axisLabel: {
					margin: 15,//距离
					interval: 0,
					rotate: 45,//倾斜度
				},

				triggerEvent: true
			},
			yAxis: {
				type: "value",
			},
			series: [
				{
					data: value,
					type: "line",
					areaStyle: {},
				},
			],
		};
	};
	getOptionzh() {
		let sj = this.state.OptionLeft.names;
		let value = this.state.OptionLeft.value1;
		return this.getConfigs(sj, value);
	};

	getConfigs(types,values) {
		return {
			grid: {
				left: '5%',       // 左边距
				right: '5%',      // 右边距
				top: '10%',       // 上边距
				bottom: '10%',    // 下边距
				containLabel: true,
				// borderColor: "#282f47",
				// show: true,
			},

			tooltip: {
				trigger: 'axis', // 触发类型，'axis' 表示按坐标轴触发
				axisPointer: {
					type: 'line', // 默认为直线，可选为：'line' | 'shadow'
					lineStyle: {
						color: '#333', // 指示线的颜色
						width: 1,      // 指示线的宽度
					},
				},
			},

			xAxis: {
				type: "category",
				boundaryGap: false,
				data: types,
				axisLabel: {
					margin: 15,//距离
					interval: 0,
					rotate: 45,//倾斜度
				},
				triggerEvent: true
			},
			yAxis: {
				type: "value",
			},
			series: [
				{
					data: values,
					type: "line",
					areaStyle: {},
				},
			],
		};
	}

	getOptionSale = () => {
		const types = this.state.OptionSale.names;
		const values = this.state.OptionSale.value1;
		return this.getConfigs(types, values);
	}

	onChartReadyCallback() { }

/*	onChartClick(param, myEcharts) { }*/

/*
	componentDidMount() {
		//主题的设置要在willmounted中设置
		// echarts.registerTheme('theme', echartsTheme)
		this.queryNotice();
	}
*/

	componentWillUnmount = () => {
		// clearInterval(timer);
		clearTimeout(timer)
	};

/*	queryNotice = () => {
		notice.getLast().then((res) => {
			if (res.code !== 0) {
				this.setState(
					{
						title: res.ggbt || "",
						content: res.ggnr || "",
					},
					() => this.keepRunning()
				);
			}
		});
	};*/

	stopRunning = () => {
		// clearInterval(timer);
		clearTimeout(timer)
		this.setState({freeze: true})
	};

	keepRunning = () => {
		timer = setTimeout(()=>{
			this.setState({freeze: false})
		},600)
	}

/*	keepRunning = () => {
		let noticeWidth = this.state.noticeWidth || -this.notice.offsetWidth;
		let boxWidth = this.noticeBox.offsetWidth;
		this.setState(
			{
				noticeWidth,
				boxWidth,
				time: 0,
			},
			() => {
				timer = setInterval(() => {
					let { noticeWidth, boxWidth } = this.state;
					noticeWidth += 50;
					if (noticeWidth - boxWidth < 0) {
						this.setState({ noticeWidth, time: 1 });
					} else {
						clearInterval(timer);
						this.setState(
							{ noticeWidth: -this.notice.offsetWidth, time: 0 },
							() => {
								this.keepRunning();
							}
						);
					}
				}, 1000);
			}
		);
	};*/

	render() {
		const {title, content,freeze } = this.state;
		return (
			<div className="HomePage">
				<div
					className="topBar"
					onMouseEnter={this.stopRunning}
					onMouseLeave={this.keepRunning}
				>
					<NotificationOutlined className="topBarIcon" />
					<div className="noticeBox">
						<span className={freeze ? "freeze" : ""}>
							{title !== "" && content !== "" ? `${title}：${content}` : "暂无公告"}
						</span>
					</div>
					{/* <Button type="primary" size='small' icon='caret-right' className='topBarButton'>more</Button> */}
				</div>
				<div className="chartBottom">
					<span className="chartTitle">今日账号留资情况</span>
					<ReactEcharts
						option={this.getOptionzh()}
						notMerge={true}
						lazyUpdate={true}
						theme="theme"
						onChartReady={this.onChartReadyCallback} //表格渲染好后触发
						// onEvents={EventsDict}//此处需要一个事件对象
						className="reactEcharts"
					/>
				</div>
				<div className="chartRight">
					<span className="chartTitle">今日微信客服留资情况</span>
					<ReactEcharts
						option={this.getOptionRight()}
						notMerge={true}
						lazyUpdate={true}
						theme="theme"
						onChartReady={this.onChartReadyCallback} //表格渲染好后触发
						// onEvents={EventsDict}//此处需要一个事件对象
						className="reactEcharts"
					/>
				</div>


				<div className="chartRight">
					<span className="chartTitle">今日销售统计</span>
					<ReactEcharts
						option={this.getOptionSale()}
						notMerge={true}
						lazyUpdate={true}
						theme="theme"
						onChartReady={this.onChartReadyCallback} //表格渲染好后触发
						// onEvents={EventsDict}//此处需要一个事件对象
						className="reactEcharts"
					/>
				</div>
				{/* <div className='chartBottom'>
                    <span className='chartTitle'>各套餐体检人数统计</span>
                    <ReactEcharts
                        option={this.getOptionBottom()}
                        notMerge={true}
                        lazyUpdate={true}
                        theme="theme"
                        onChartReady={this.onChartReadyCallback}//表格渲染好后触发
                        // onEvents={EventsDict}//此处需要一个事件对象
                        className='reactEcharts'
                    />
                </div> */}
			</div>
		);
	}
}

export default HomePage;
